<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎您，尊敬的 : {{ name }}</div>
    <el-row>
      <el-divider content-position="left">课程推荐</el-divider>
    </el-row>
    <el-row :gutter="10">
     <el-col :span="24">
       <div>
         <el-table :data="recommendList">
           <el-table-column prop="name" label="名称"></el-table-column>
           <el-table-column prop="content" label="内容"></el-table-column>
           <el-table-column prop="attendCount" label="当前人数"></el-table-column>
           <el-table-column prop="total" label="总人数"></el-table-column>
           <el-table-column prop="special" label="特色"></el-table-column>
           <el-table-column prop="duration" label="课时"></el-table-column>
           <el-table-column align="center" label="操作" width="280">
             <template slot-scope="scope">
               <el-button type="warning"   @click="showPlayPage(scope.row)" title="播放视频">试播</el-button>
               <el-button type="primary"  @click="sign(scope.row)">报名</el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>
     </el-col>
   </el-row>
   
    <el-row>
      <el-divider content-position="left">信息统计</el-divider>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="regesiter_num" :style="{ height: '400px' }"></div
      ></el-col>
      <el-row>
      <el-col :span="3"
        ><div class="grid-content bg-purple">
          课程数量：{{ this.courseCount }}
        </div>
        <div class="content">
          <img
            src="../assets/images/小区.png"
            class="img-responsive"
            alt="Image"
          />
        </div>
      </el-col>
      <el-col :span="3"
        ><div class="grid-content bg-purple-light">
          设备数量:{{ this.devicesCount }}
        </div>
        <div class="content">
          <img
            src="../assets/images/楼栋.png"
            class="img-responsive"
            alt="Image"
          /></div
      ></el-col>
      
      <el-col :span="3"
        ><div class="grid-content bg-purple-light">
          学员人数:{{ this.userCount }}
        </div>
        <div class="content">
          <img
            src="../assets/images/人数.png"
            class="img-responsive"
            alt="Image"
          /></div
      ></el-col>
    </el-row>
    </el-row>

  </div>
</template>

<script>
import * as echarts from "echarts"; //引入echarts
import { mapGetters } from "vuex";
import dashboardApi from "@/api/sysDashboard/dashboard";
import courseapi from '@/api/sysCourse/course.js'

export default {
  data() {
    this.myChart = null;
    return {
      courseCount: 0,
      devicesCount: 0,
      userCount: 0,
      //推荐的课程
      recommendList:[],
    };
  },
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  //挂载时进行
  mounted() {
    this.findRecommendList();
    this.selectDevicesCount();
    this.selectCourseCount();
    this.selectUserCount();

    this.myChart = echarts.init(document.getElementById("regesiter_num"));
    this.getData();
  },

  // created() {
  //   this.findRecommendList();
  //   this.selectDevicesCount();
  //   this.selectCourseCount();
  //   this.selectUserCount();
  // },

  methods: {

    //获取每个课程的当前报名人数
    getData() {
      dashboardApi.getCourseData().then((res) => {
        console.log(res.data);
        this.initData(res.data);
      });
    },
    initData(datalist) {
      console.log(datalist);
      this.myChart.setOption({
        title: {
          text: "课程的报名人数比例",
          subtext: "饼状图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            // data: [
            //   { value: 1048, name: "Search Engine" },
            //   { value: 735, name: "Direct" },
            //   { value: 580, name: "Email" },
            //   { value: 484, name: "Union Ads" },
            //   { value: 300, name: "Video Ads" },
            // ],
            data: datalist,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },

   // 播放视频
  showPlayPage(row) {
        this.$router.push('/assignVideo?id='+row.id);
  },
      // 查询推荐的课程
  findRecommendList() {
      courseapi.findRecommend().then((res) => {
       this.recommendList = res.data;
     });
   },

    //去查询课程的数量
    selectCourseCount() {
      dashboardApi.selectCourseCount().then((res) => {
        console.log(res);
        this.courseCount = res.data;
      });
    },
    //去查询用户的数量
    selectUserCount() {
      dashboardApi.selectUserCount().then((res) => {
        this.userCount = res.data;
      });
    },
    //去查询器材的数量
    selectDevicesCount() {
      dashboardApi.selectDevicesCount().then((res) => {
        console.log(res);
        this.devicesCount = res.data;
      });
    },
    
  },
};
</script>



<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
  line-height: 100px;
}
.row-bg {
  padding: 10px 0;
  background-color: #ffffff;
}
.content {
  text-align: center;
}
.park {
  width: 350px;
  height: 350px;
  background-color: #0073b7;
  border-radius: 20px;
  margin: 20px;
  padding: 20px;
  font-size: 30px;
  color: #fff;
  &:park_user {
    line-height: 60px;
    text-align: center;
    font-size: 25px;
  }
}
</style>
<style>
</style>

<!-- <template>
  <div>
    <el-row>
      <el-col :span="12">
        <div id="regesiter_num" :style="{ height: '300px' }"></div
      ></el-col>
      <el-col :span="12">
        <div id="login_num" :style="{ height: '300px' }"></div
      ></el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div id="video_view_num" :style="{ height: '300px' }"></div
      ></el-col>
      <el-col :span="12">
        <div id="pic_view_num" :style="{ height: '300px' }"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  //挂载时进行
  mounted() {
    this.initChars("regesiter_num", "注册人数统计");
    this.initChars("login_num", "注册人数统计");
    this.initChars("video_view_num", "注册人数统计");
    this.initChars("pic_view_num", "注册人数统计");
  },
  created() {},
  methods: {
    initChars(type, title) {
      var myChart = echarts.init(document.getElementById(type));

      myChart.setOption({
        title: {
          text: title,
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 2, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};
</script>

<style>
</style> 
